<template>
  <div class="student-info-container">
    <div
        v-for="(student, index) in students"
        :key="index"
        :class="['student-item', { selected: this.$store.state.studentIndex === index }]"
        @mouseover="mouseOverStudent(index)"
        @click="clickStudent(index)"
    >
      <div class="student-content">
        <div class="student-id">{{ student.accountNo }}</div>
        <div class="student-name">{{ student.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    students: Array
  },
  methods: {
    clickStudent(index) {
      this.selectedStudentIndex = index; // 设置选中的学生索引
      this.$store.commit('setStudentIndex', index); // 提交索引到 store
    },
    mouseOverStudent(index) {
      event.currentTarget.style.cursor = 'pointer';
    }
  }
};
</script>

<style scoped>
.student-info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.student-item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.student-item.selected {
  background-color: #f0f8ff; /* 选中时的背景颜色 */
}

.student-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
}

.student-id,
.student-name {
  margin: 0;
  padding: 0;
}
</style>
